<template>
  <div>
    <Row type="flex" class="common_window_top" align="middle" justify="start">
      <Col span="4">
      <div>
          <span class="title">
            <Icon type="md-contact" size="45"/>用户管理</span>
      </div>
      </Col>
      <Col span="20">
      <div style="float: right">
        <Form label-position="right" :label-width="65" inline>
          <FormItem label="用户名:" >
            <Input type="text" placeholder="realName" v-model="parameters.realName"/>
          </FormItem>
          <FormItem label="登录名:">
            <Input type="text" placeholder="username" v-model="parameters.username"/>
          </FormItem>
          <FormItem label="手机号码:">
            <Input type="number" placeholder="phone" v-model="parameters.phone"/>
          </FormItem>
          <FormItem :label-width="0">
            <Button type="primary" @click="findButton">查询</Button>
          </FormItem>
          <FormItem :label-width="0" style="margin-left: 10px;">
            <Button type="success" @click="addUserButton">新增</Button>
          </FormItem>
        </Form>
      </div>
      </Col>
    </Row>
    <br>
    <Row class="common_window_down">
      <Col span="24">
      <Table border :columns="userCol" :data="userList"></Table>
      <Page :current="parameters.current" :total="total" :page-size="parameters.size" @on-change="changePageCurrent" @on-page-size-change="changePageSize" show-elevator show-total></Page>
      </Col>
    </Row>

    <Modal v-model="addOrUpdateUser.isShow" :title="addOrUpdateUser.parameters.id ? '修改用户' : '新增用户'" :mask-closable="false">
      <Form ref="formValidate" :model="addOrUpdateUser.parameters" :rules="addOrUpdateUser.ruleValidate" label-position="right" :label-width="75" inline>
        <Row :gutter="3">
          <Col span="12">
          <FormItem label="登录账号:" prop="username">
            <Input v-model="addOrUpdateUser.parameters.username" :disabled="addOrUpdateUser.parameters.id ? true : false" type="text" placeholder="请输入..." />
          </FormItem>
          </Col>
          <Col span="12">
          <FormItem label="用户姓名:" prop="realName">
            <Input v-model="addOrUpdateUser.parameters.realName" type="text" placeholder="请输入..."/>
          </FormItem>
          </Col>
        </Row>
        <Row :gutter="3">
          <Col span="12">
          <FormItem label="电子邮箱:" prop="email">
            <Input v-model="addOrUpdateUser.parameters.email" type="text" placeholder="请输入..." />
          </FormItem>
          </Col>
          <Col span="12">
          <FormItem label="手机号码:" prop="phone">
            <Input v-model="addOrUpdateUser.parameters.phone" type="text" placeholder="请输入..."/>
          </FormItem>
          </Col>
        </Row>
        <Row :gutter="3">
          <Col span="12">
          <FormItem label="性别:" style="width: 94%" prop="sex">
            <Select v-model="addOrUpdateUser.parameters.sex"  placeholder="性别" >
              <Option v-for="(item,index) in dictArray.sex" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          </Col>
          <Col span="12">
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="primary" size="large" :loading="addOrUpdateUser.loading" @click="sendUser">提交</Button>
      </div>
    </Modal>

    <Modal v-model="authorizationRole.isShow" title="用户授权" :mask-closable="false">
      <Table border ref="selection" :columns="authorizationRole.roleColunms" :data="authorizationRole.roleDatas" @on-selection-change="checkRole"></Table>
      <div slot="footer">
        <Button type="primary" size="large" :loading="authorizationRole.loading" @click="sendAuthorization">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {listPageUserInfo,addUser,updateUser,deleteUser,allotRoleForUser} from "../../../api/sys/system/sysUser";
  import {listRoleByUser} from "../../../api/sys/system/sysRole";
  import {mapState} from "vuex";
  import FormItem from "iview/src/components/form/form-item";

  export default {
    name : 'sysSystemUser',
    computed : {
      ...mapState(['dictObject','dictArray'])
    },
    components: {FormItem},
    data () {
      return {
        parameters : {
          realName : null,
          username : null,
          phone : null,
          current : 1,
          size : 10,
        },
        total : 0,
        userList : [],
        userCol : [
          {title : '用户姓名',key : 'realName',align : 'center',tooltip : true},
          {title : '登录账号',key : 'username',align : 'center',tooltip : true},
          {title : '电子邮箱',key : 'email',align : 'center',tooltip : true},
          {title : '手机号码',key : 'phone',align : 'center',tooltip : true},
          {title : '用户性别',key : 'sex',align : 'center',tooltip : true,render : (h,parame)=>{return h('span',this.dictObject.sex[parame.row.sex])}},
          {title : '操作',align : 'center',width : 240,render : (h,parame)=>{
              var buttons = [];
              buttons.push(h('Button',{
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                nativeOn : {
                  click : ()=>{
                    this.openAuthorizationRole(parame.row);
                  }
                }
              },'分配角色'));
              buttons.push(h('Button',{
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                nativeOn : {
                  click : ()=>{
                    this.addOrUpdateUser.isShow = true;
                    this.addOrUpdateUser.parameters.id = parame.row.id;
                    this.addOrUpdateUser.parameters.username = parame.row.username;
                    this.addOrUpdateUser.parameters.realName = parame.row.realName;
                    this.addOrUpdateUser.parameters.email = parame.row.email;
                    this.addOrUpdateUser.parameters.phone = parame.row.phone;
                    this.addOrUpdateUser.parameters.sex = parame.row.sex;
                  }
                }
              },'修改'));
              buttons.push(h('Button',{
                props: {
                  type: 'error',
                  size: 'small'
                },
                on : {
                  click : ()=>{
                    this.deleteUser(parame.row.id);
                  }
                }
              },'删除'));
              return h('div',{},buttons)
            }},
        ],
        addOrUpdateUser : {
          isShow : false,
          loading : false,
          parameters : {
            id : null,
            username : null,
            realName : null,
            email : null,
            phone : null,
            sex : '1',
          },
          ruleValidate : {
            username : { required: true, message: '必填！', trigger: 'change' },
            realName : { required: true, message: '必填！', trigger: 'change' },
            email : { required: true, message: '必填！', trigger: 'change' },
            phone : { required: true, message: '必填！', trigger: 'change' },
          }
        },
        authorizationRole : {
          isShow : false,
          loading :false,
          parameters : {
            id : null,
            roleIds : null,
          },
          roleDatas : [],
          roleColunms : [
            {
              type : 'selection',
              width : 60,
              align : 'center'
            },
            {
              title : '角色名称',
              key : 'roleName',
              align : 'center'
            },
            {
              title : '角色类型',
              key : 'roleType',
              align : 'center'
            }
          ],
        }
      }
    },
    mounted(){
      this.findUsers();
    },
    methods : {
      findButton (){
        this.parameters.current = 1;
        this.findUsers();
      },
      findUsers(){
        if(this.selectCodes && this.selectCodes.length > 0){
          this.parameters.officeCode = this.selectCodes[this.selectCodes.length - 1];
        }else{
          this.parameters.officeCode = null;
        }
        listPageUserInfo(this.parameters).then(result =>{
          this.parameters.current = result.data.current;
          this.total = result.data.total;
          this.userList = result.data.records;
        });
      },
      addUserButton(){
        this.$refs['formValidate'].resetFields();
        this.addOrUpdateUser.parameters.id = null;
        this.addOrUpdateUser.isShow = true;
        this.addOrUpdateUser.loading = false;
      },
      sendUser(){
        this.$refs['formValidate'].validate(valid=>{
          this.addOrUpdateUser.loading = true;
          if(valid){
            if(this.addOrUpdateUser.parameters.id){
              //修改
              updateUser(this.addOrUpdateUser.parameters.id,this.addOrUpdateUser.parameters).then(result =>{
                this.sendSuccess(false);
              },error =>{
                this.addOrUpdateUser.loading = false;
              });
            }else{
              //新增
              addUser(this.addOrUpdateUser.parameters).then(result =>{
                this.sendSuccess(true);
              },error =>{
                this.addOrUpdateUser.loading = false;
              });
            }
          }else{
            this.addOrUpdateUser.loading = false;
          }
        });
      },
      sendSuccess(is){
        this.addOrUpdateUser.loading = false;
        this.addOrUpdateUser.isShow = false;
        this.$Message.success(is ? "新增成功！" : "修改成功！");
        this.findUsers();
      },
      deleteUser(id){
        deleteUser(id).then(result =>{
          this.$Message.success("删除成功！");
          this.findUsers();
        });
      },
      /**
       * 打开分配角色页面
       */
      openAuthorizationRole(row){
        this.authorizationRole.isShow = true;
        this.authorizationRole.loading = false;
        this.authorizationRole.parameters.id = row.id;
        this.authorizationRole.parameters.roleIds = null;
        listRoleByUser(row.id).then(result =>{
          this.authorizationRole.roleDatas = result.data;
        });
      },
      /**
       * 点击选中角色
       */
      checkRole(selection){
        var selectRole = [];
        for(var i = 0;i<selection.length;i++){
          selectRole.push(selection[i].id);
        }
        this.authorizationRole.parameters.roleIds = selectRole.join(',');
      },
      /**
       * 发送分配角色
       */
      sendAuthorization(){
        this.authorizationRole.loading = true;
        if(!this.authorizationRole.parameters.roleIds){
          var checks = this.$refs.selection.getSelection()
          if(checks && checks.length > 0){
            var selectRole = [];
            for(var i = 0;i<checks.length;i++){
              selectRole.push(checks[i].id);
            }
            this.authorizationRole.parameters.roleIds = selectRole.join(',');
          }
        }
        allotRoleForUser(this.authorizationRole.parameters.id,this.authorizationRole.parameters).then(result =>{
          this.$Message.success("分配成功！");
          this.authorizationRole.isShow = false;
          this.authorizationRole.loading = false;
        },error =>{
          this.authorizationRole.loading = false;
        });
      },
      changePageCurrent(current){
        this.parameters.current = current;
        this.findUsers();
      },
      changePageSize(size){
        this.parameters.size = size;
        this.findUsers();
      },
    }
  }
</script>

<style scoped>
</style>
